<template>
  <div class="allShow-container">
    <div class="up-container">
      <el-popover
        placement="bottom"
        width="200"
        trigger="hover"
        content="点击我可以再次进入引导">
        <div slot="reference" class="title" id="allShow-step1" @click="guide">
          <span>图片压缩</span>
        </div>
      </el-popover>
      
      <el-upload
        id="allShow-step2"
        ref="upload"
        class="imgSliderUpload"
        drag
        action="/upload/pic"
        :multiple="false"
        :auto-upload="false"
        :show-file-list="false"
        :before-upload="beforeImgUpload"
        :on-change="changeImgUpload">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将图片拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传jpg/jpeg/png文件</div>
      </el-upload>

      <div class="setting-icon" id="allShow-step3" @click="openQualityDrawer">
        <el-tooltip
          effect="dark"
          :content="'配置压缩质量，当前' + quality + '，点我修改'"
          placement="top">
          <i class="el-icon-s-tools"></i>
        </el-tooltip>
      </div>
    </div>
    <div class="down-container" v-if="outputUrl" v-loading="compressContainerLoading">
      <div class="contrastImg-introduction">
        <div>
          <span>压缩前图片大小：{{ inputSize }}KB</span>
        </div>
        <div>
          <el-button type="primary" size="small" @click="download">下载</el-button>
        </div>
        <div>
          <span>压缩后图片大小：{{ outputSize }}KB</span>
        </div>
      </div>
      <div class="contrastImg-container">
        <img-comparison-slider style="width: 100%; height: 100%">
          <img slot="first" style="width: 100%" :src="inputUrl" />
          <img slot="second" style="width: 100%" :src="outputUrl" />
        </img-comparison-slider>
      </div>
    </div>
    <div class="noneOutputImg-container" v-loading="compressContainerLoading" v-else>
      <h3>请先选择图片</h3>
    </div>
    <a v-show="false" id="adown" :download="outputName" :href="outputUrl">下载</a>
    <el-drawer
      title="图片压缩配置"
      :visible.sync="drawerVisible"
      direction="rtl"
      :modal-append-to-body="false"
    >
      <div class="drawer-container">
        <el-form
          ref="form"
          :model="form"
          label-width="120px"
          label-position="top">
          <el-form-item
            label="图片压缩质量(从0.1到1，步长为0.1)，输入包含非数字会变为上一次的值，输入数字会寻找相近的值">
            <el-input-number
              v-model="quality"
              :min="0.1"
              :max="1"
              :step="0.1"
              :precision="1"
              style="width: 240px"></el-input-number>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>

<script>
  import Compressor from "compressorjs"; //只能压缩jpg、jpeg和webp
  // import { shrinkImage } from "shrinkpng"; //可以压缩png,源代码中写死质量80，传参不变
  import {shrinkImage} from '../../../utils/shrinkPng/common'
  import steps from "./allShowStep"

  export default {
    name: "AllShow",
    data() {
      return {
        drawerVisible: false,
        quality: 0.8,
        form: {},
        outputUrl: "",
        inputUrl: "",
        inputSize: "",
        outputUrl: "",
        outputName: "",
        outputSize: "",
        compressContainerLoading: false,
      };
    },
    mounted() {
      setTimeout(() => {
        this.guide()
      }, 500)
    },
    methods: {
      openQualityDrawer() {
        this.drawerVisible = true;
      },
      beforeImgUpload(file) {
        console.log(file);
        return true;
      },
      async changeImgUpload(file, fileList) {
        let index = file.name.indexOf(".") + 1;
        let typeName = file.name.substr(index);
        let that = this;
        if (
          typeName.toLowerCase() == "jpeg" ||
          typeName.toLowerCase() == "jpg"
        ) {
          this.compressContainerLoading = true
          let formatFile = file.raw;
          this.inputUrl = URL.createObjectURL(new Blob([formatFile]));
          this.inputSize = (formatFile.size / 1024).toFixed(2);
          this.outputUrl = "";
          new Compressor(formatFile, {
            quality: that.quality,
            convertSize: Infinity,
            success(result) {
              that.outputUrl = URL.createObjectURL(new Blob([result]));
              that.outputName = result.name;
              that.outputSize = (result.size / 1024).toFixed(2);
              that.compressContainerLoading = false
            },
            error(e) {
              that.compressContainerLoading = false
              that.$message.warning("压缩出现异常，请重试");
              that.$refs.upload.clearFiles();
            }
          });
        } else if (typeName.toLowerCase() == "png") {
          this.compressContainerLoading = true
          let formatFile = file.raw;
          this.inputUrl = URL.createObjectURL(new Blob([formatFile]));
          this.inputSize = (formatFile.size / 1024).toFixed(2);
          this.outputUrl = "";
          const _file = await shrinkImage(formatFile, 
            // quality: parseInt(this.quality * 100)
            this.quality * 100
          );
          this.outputUrl = URL.createObjectURL(new Blob([_file]));
          this.outputSize = (_file.size / 1024).toFixed(2);
          this.outputName = formatFile.name;
          this.compressContainerLoading = false
        } else {
          this.$message.warning("格式错误");
          this.$refs.upload.clearFiles();
          this.compressContainerLoading = false
        }
        // console.log(file,fileList);
      },
      download() {
        let ele = document.getElementById("adown")
        ele.click()
      },
      guide() {//页面引导功能
        // console.log(steps);
        this.$driver.defineSteps(steps)
        this.$driver.start()
      }
    },
  };
</script>

<style lang="less" scoped>
  .allShow-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: auto;
    .up-container {
      width: 100%;
      height: 200px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      flex-shrink: 0;
      background: radial-gradient(
        circle farthest-side at right top,
        #d0590d,
        #ffff23 50%,
        #32a09a
      );
      .title {
        font-size: 24px;
        letter-spacing: 4px;
        cursor: pointer;
      }
      .setting-icon {
        font-size: 40px;
        cursor: pointer;
      }
    }
    .down-container {
      width: 100%;
      // height: 1080px;
      padding: 16px;
      box-sizing: border-box;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      .contrastImg-introduction {
        width: 100%;
        height: 50px;
        flex-shrink: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .contrastImg-container {
        width: 100%;
        // height: 100%;
        flex: 1;
        flex-shrink: 0;
      }
    }
    .noneOutputImg-container {
      width: 100%;
      flex: 1;
      display: flex;
      justify-content: center;
      padding-top: 16px;
    }
  }

  .pic {
    width: 100%;
    height: 100%;
    transition: filter 0.8s ease;
  }
  .pic:hover {
    filter: grayscale(100%) opacity(36%);
  }

  .drawer-container {
    width: 100%;
    height: 100%;
    padding: 16px;
  }

  ::v-deep .imgSliderUpload {
    .el-upload-dragger {
      width: 260px;
      height: 120px;
      .el-icon-upload {
        margin-top: 16px;
        margin-bottom: 16px;
      }
    }
    .el-upload__tip {
      display: flex;
      justify-content: center;
    }
  }

  .el-tooltip.focusing {
    // display: none;
    visibility: hidden;
  }
</style>
